<!DOCTYPE html>

<html>
<head>
	<link rel="stylesheet" href="../../../themes/themeroller/maemo5-theme/ui.all.css" type="text/css" media="screen" />
	<link rel="stylesheet" href="../../../themes/nokia/ext-theme/maemo5/800x480/custom.css" type="text/css" media="screen" />

	<script src="../../../lib/jquery/jquery.js" type="text/javascript" charset="utf-8"></script>
	<script src="../../../lib/jquery/jquery.scrollTo.js" type="text/javascript" charset="utf-8"></script>

	<script src="../../../src/defaults.js" type="text/javascript" charset="utf-8"></script>
	<script src="../../../src/core.js" type="text/javascript" charset="utf-8"></script>

	<style type="text/css" media="screen">
		body {
			font-size: 18px;
			font-family: "Trebuchet MS", "Helvetica", "Arial",  "Verdana", "sans-serif";
			color: white;
		}

		p {
			margin: 30px 10px;
		}

		#element-scroll {
			height: 250px;
			width: 300px;
			border: 1px solid #ccc;
			overflow: hidden;
			margin: 50px 20px
		}
	</style>

</head>

<body>

<p>
	Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
	ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
	amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
	odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
</p>

<p>
	Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
	ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
	amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
	odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
</p>

<p>
	Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
	ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
	amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
	odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
</p>

<p>
	Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
	ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
	amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
	odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
</p>

<p>
	Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
	ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
	amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
	odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
</p>

<p>
	Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
	ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
	amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
	odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
</p>

<p>
	Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
	ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
	amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
	odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
</p>

<p>
	Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
	ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
	amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
	odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
</p>

<p>
	Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
	ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
	amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
	odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
</p>

<p>
	Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
	ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
	amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
	odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
</p>

<div id="element-scroll">
	<p>
		Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
		ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
		amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
		odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
	</p>

	<p>
		Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
		ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
		amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
		odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
	</p>

	<p>
		Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
		ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
		amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
		odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
	</p>

	<p>
		Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
		ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
		amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
		odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
	</p>

	<p>
		Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
		ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
		amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
		odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
	</p>

	<p>
		Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
		ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
		amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
		odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
	</p>

	<p>
		Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
		ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
		amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
		odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
	</p>

	<p>
		Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
		ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
		amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
		odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
	</p>

	<p>
		Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
		ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
		amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
		odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
	</p>
</div>

<script type="text/javascript" charset="utf-8">

	var init = function() {

		// creating a new instance of Nokia.SampleWidget that inherits from Nokia.Widget

		var scroll = new Nokia.Scroll({
			scrollBar: true,
			showArrows: false,
			increase: 250,
			create: function() {
				console.log("Scroll: Create");
			},
			scroll: function() {
				console.log("Scroll: Scroll");
			},
		});

		var scroll = new Nokia.Scroll({
			element: "#element-scroll",
			scrollBar: true,
			showArrows: true,
			increase: 500,
			duration: 100,
		});

		scroll.vibrate(100, 100); // invoking inherited method from Nokia.Widget
		
		/*
		 * Hide splash when its all done.
		*/
		
		Nokia.hideSplash();

	};
	
	/*
	 * Show splash while loading components.
	*/
		
	Nokia.showSplash('<span>loading</span>');
	
	Nokia.use('scroll', init);

</script>

</body>
</html>
